<template>
  <div>
    <div class="news-title">
      <div class="left">
        <img src="@/assets/img/u57.png" alt="">
        <img src="@/assets/img/u61.png" alt="">
      </div>
      <input v-if="!isFollow" @click="follow" class="concerneBtn" type="button" value="关注">
      <input v-if="isFollow" @click="unFollow" class="concernedBtn" type="button" value="已关注">
    </div>
    <div class="news-content">
      <p class="title">{{this.result.title}}</p>
      <div v-if="result.type==1" class="text-content">
        <span>{{result.user.nickname}} <i>2019-10-10</i></span>
        <div class="content" v-html="result.content"></div>
      </div>
      <div v-if="result.type==2" class="video-content">
        <video class="video" autoplay="autoplay" controls="controls" src="https://video.pearvideo.com/mp4/short/20191023/cont-1615301-14515659-hd.mp4"></video>
        <span>{{result.user.nickname}} <i>2019-10-10</i></span>
      </div>

      <div class="bottom">
        <div ref="likeColor" class="left" @click="getFabulous">
          <img src="@/assets/img/u74.png" alt="">
          <i>{{result.like_length}}</i>
        </div>
        <div class="right">
          <img src="@/assets/img/u76.png" alt="">
          <span>微信</span>
        </div>
      </div>
    </div>
    <div v-if="commentData.length==0" class="news-post">
      <span class="title">精彩跟帖</span>
      <p>暂无跟帖,抢占沙发</p>
    </div>
    <!-- 跟帖区域 -->
    <comment v-else v-for="(item, index) in commentData" :commentItem="item" :key="index" @sendToDetail="getSonData"></comment>

    <div @click="gotoMoreFllow" class="moreFollow">更多跟帖</div>
    <!-- 底部区域 -->
    <div v-if="!isFocus" class="news-bottom">
      <input @focus="openSendBtn" type="text" placeholder="写跟帖">
      <div class="right">
        <span class="pinglun">102</span>
        <img src="@/assets/img/u67.png" alt="">
        <img src="@/assets/img/u69.png" alt="">
        <img src="@/assets/img/u62.png" alt="">
      </div>
    </div>
    <div v-if="isFocus" class="news-bottom-send">
      <textarea ref="textarea" v-model="txtAreaContent" rows="4"></textarea>
      <input @click="sendBtn" type="button" value="发送">
    </div>
  </div>

</template>

<script>
import newsDetailApi from '@/api/newsDetail'
import Comment from '@/commonComponent/comment'

export default {
  data() {
    return {
      id: this.$route.params.id,
      result: {},
      isFollow: false,
      user_id: 0,
      isFocus: false,
      txtAreaContent: '',
      commentData: [],
      pageSize: 3,
      huifu_id: null
    }
  },
  created() {
    this.getPostDetailData(this.id)
    this.getPostCommentData(this.id, this.pageSize)
  },
  methods: {
    getSonData(obj) {
      console.log(obj);
      this.isFocus = obj.isActive
      this.huifu_id = obj.id
      this.$nextTick(() => {
        this.$refs.textarea.focus()
      })
    },
    sendBtn() {
      // this.txtAreaContent = ''

      if (this.txtAreaContent.trim() === '') {
        this.isFocus = false
        return
      }
      newsDetailApi.pushPostComment(this.id, this.txtAreaContent, this.huifu_id).then(res => {
        console.log(res.data.message);
        if (res.data.message == '评论发布成功') {
          this.txtAreaContent = ''
          this.isFocus = false
          this.getPostCommentData(this.id, this.pageSize)
          this.huifu_id = null
        }
      })
    },
    openSendBtn() {
      console.log('获取焦点');
      this.isFocus = true
      this.$nextTick(() => {
        this.$refs.textarea.focus()
      })
    },
    getPostDetailData(id) {
      newsDetailApi.getPostDetailById(id).then(res => {
        let resp = res.data
        console.log(resp.data);
        this.result = resp.data
        this.isFollow = resp.data.has_follow
        this.user_id = resp.data.user.id
      })
    },
    getPostCommentData(id, pageSize) {
      newsDetailApi.getPostComment(id, pageSize).then(res => {
        let resp = res.data
        console.log(resp.data)
        this.commentData = resp.data
      })
    },
    follow() {
      newsDetailApi.followUser(this.user_id).then(res => {
        let resp = res.data
        console.log(resp);
        if (resp.message == '关注成功') {
          this.isFollow = true
        }
      })
    },
    unFollow() {
      newsDetailApi.unfollowUser(this.user_id).then(res => {
        let resp = res.data
        console.log(resp);
        if (resp.message == '取消关注成功') {
          this.isFollow = false
        }
      })
    },
    getFabulous() {
      // if(result.result === 0){

      // }
      newsDetailApi.postLike(this.user_id).then(res => {
        let resp = res.data
        if (resp.message == '点赞成功') {
          this.result.like_length += 1
          this.$refs.likeColor.style.background = 'red'
        } else if (resp.message == '取消成功') {
          this.result.like_length -= 1
          this.$refs.likeColor.style.background = '#f2f2f2'
        }
      })
    },
    gotoMoreFllow() {
      this.$router.push({
        name: 'moreFollow',
        params: {
          id: this.$route.params.id
        }
      })
    }
  },
  components: {
    Comment
  }
}
</script>

<style scoped>
.news-title {
  display: flex;
  justify-content: space-between;
}

.news-title .left {
  margin-left: 5vw;
}

.news-title .left img:nth-child(1) {
  width: 5vw;
  vertical-align: middle;
}

.news-title .left img:nth-child(2) {
  width: 15vw;
  vertical-align: middle;
}

.concerneBtn {
  width: 18vw;
  height: 8vw;
  margin-top: 4vw;
  margin-right: 5vw;
  background-color: #ff0000;
  border: none;
  outline: none;
  border-radius: 10vw;
  color: white;
  font-size: 3.5vw;
}
.concernedBtn {
  width: 18vw;
  height: 8vw;
  margin-top: 4vw;
  margin-right: 5vw;
  background-color: #f2f2f2;
  outline: none;
  border-radius: 10vw;
  color: #797979;
  font-size: 3.5vw;
  border-color: #797979;
}
.news-content {
  padding: 0 4.5vw;
  border-bottom: 1vw solid #e4e4e4;
  padding-bottom: 5vw;
}
.news-content .title {
  font-size: 5vw;
  font-weight: 700;
  color: #333333;
  line-height: 7vw;
  margin-bottom: 4vw;
}
.news-content .text-content > span > i {
  padding-left: 5vw;
}
.news-content .video {
  width: 100%;
  margin-bottom: 4vw;
}
.news-content .content {
  margin-top: 4vw;
  line-height: 8vw;
  font-size: 3.5vw;
  color: #333333;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10vw;
}
.bottom .left {
  width: 22vw;
  padding: 1.5vw 4vw;
  border: 1px solid #797979;
  border-radius: 10vw;
  text-align: center;
  line-height: 4vw;
  margin-left: 20vw;
}
.bottom .right {
  position: relative;
  width: 23vw;
  padding: 1.6vw 3vw;
  border: 1px solid #797979;
  border-radius: 10vw;
  line-height: 4vw;
  margin-right: 20vw;
}
.bottom .left img {
  width: 4.6vw;
  vertical-align: middle;
  margin-top: -0.9vw;
}
.bottom .right img {
  width: 5vw;
  vertical-align: middle;
  margin-top: -0.9vw;
}
.news-bottom {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vw;
}
.news-bottom-send {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3vw;
  align-items: flex-end;
  box-sizing: border-box;
}
.news-bottom-send textarea {
  display: flex;
  flex: 1;
  margin: 0 5vw 0 10vw;
  border-radius: 5vw;
  background-color: #d7d7d7;
  padding: 2vw 3vw;
}
.news-bottom-send input {
  width: 18vw;
  height: 8vw;
  margin-right: 10vw;
  background-color: #ff0000;
  border: none;
  outline: none;
  border-radius: 10vw;
  color: white;
  font-size: 3.5vw;
}
.news-bottom .right img {
  width: 6vw;
  margin-right: 3vw;
}
.news-bottom .right img:nth-child(3) {
  margin-right: 5vw;
}
.news-bottom .right .pinglun {
  position: relative;
  padding: 0.2vw 1vw;
  border-radius: 5vw;
  color: white;
  left: 11vw;
  top: -2vw;
  font-size: 1vw;
  background-color: #ff0000;
}
/* .news-bottom .right img:nth-child(1)::before{
    position: absolute;
    content: "102";
    width: 10vw;
    height: 10vw;
    background-color: #ff0000;
    z-index: 10;
  } */
.news-bottom input[type='text'] {
  background-color: #d7d7d7;
  padding: 2vw;
  border: none;
  text-indent: 3vw;
  border-radius: 5vw;
  margin-left: 4vw;
}
.news-post {
  padding: 0 4vw;
  margin-top: 10vw;
  /* border-bottom: 1px solid #e4e4e4; */
  margin-bottom: 10vw;
}
.news-post .title {
  display: block;
  text-align: center;
  font-size: 5vw;
  color: #333333;
}
.news-post p {
  display: block;
  text-align: center;
  padding: 10vw 0 15vw 0;
}
.moreFollow {
  display: block;
  margin: 7vw auto 20vw auto;
  width: 32vw;
  height: 9vw;
  border-radius: 5vw;
  outline: none;
  border: 1px solid #797979;
  text-align: center;
  line-height: 9vw;
}
</style>
